<template>
  <div class="app-container">
    <div class="filter-container">
      <h1 style="
          padding: 6px 0 10px 20px;
          border-bottom-style: solid;
          border-color: #edf0f3;
        ">
        快速查询
      </h1>

      <div style="padding: 10px 0 0 30px">
        <span class="filter-span">
          <span style="width: 60px">员工编号：</span>
          <el-input v-model="listQuery.uid"
            placeholder="员工编号"
            style="width: 180px"
            :disabled="true"
            class="filter-item"></el-input>
        </span>
        <span class="filter-span">
          <span style="width: 80px">查询日期：</span>
          <el-date-picker v-model="listQuery.stime"
            format="yyyy-MM-dd"
            value-format="yyyyMMdd"
            placeholder="开始时间">
          </el-date-picker><span>--</span>
          <el-date-picker v-model="listQuery.etime"
            format="yyyy-MM-dd"
            value-format="yyyyMMdd"
            placeholder="结束时间">
          </el-date-picker>
          <!-- <el-date-picker v-model="currentDate"
            type="daterange"
            size="small"
            unlink-panels
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="终止日期"
            @keyup.enter.native="handleFilter" /> -->
        </span>
        <el-button class="filter-item"
          type="primary"
          style="margin-left: 20px"
          @click="handleFilter">查询</el-button>
        <el-button class="filter-item"
          style="margin-left: 10px"
          @click="handleCreate">重置</el-button>
      </div>
    </div>

    <!-- 已制单历史记录 -->
    <div class="filter-tabel">
      <h1 style="padding: 10px 0 10px 10px; border-bottom: 1px solid #edf0f3">
        任务明细列表
      </h1>

      <el-table :key="tableKey"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 95%; padding-left: 20px"
        :header-cell-style="{
          'text-align': 'center',
          background: 'rgba(240, 242, 245, 1)',
        }"
        :cell-style="{
          'text-align': 'center',
        }">
        <el-table-column label="序号"
          type="index"
          align="center"
          width="50"></el-table-column>
        <el-table-column label="员工编号"
          min-width="80px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.uid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="日期"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{
              row.ctime ? formatDate(new Date(row.ctime * 1000)) : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="任务流"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标注（题数）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.annotateCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标注（影像）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.annotateImageNums }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标注（标签数）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.annotateItemcount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核（题数）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.aduitCount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核（影像）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.aduitImageNums }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核（标签数）"
          min-width="100px">
          <template slot-scope="{ row }">
            <span class="link-type">{{ row.aduitItemcount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pagesize"
      @pagination="getList" />
  </div>
</template>

<script>
import { createList, getuserInfo } from "@/api/all.js";
import Pagination from "@/components/Pagination";

export default {
  name: "ComplexTable",
  components: { Pagination },
  // directives: { waves },
  data() {
    return {
      list: [
        // {
        //   // uid: 1223,
        //   // ctime: 232545,
        //   // title: 34564,
        //   // annotateCount: 235434,
        //   // annotateImageNums:9877,
        //   // annotateItemcount:98776,
        //   // aduitCount:9877,
        //   // aduitImageNums:9876,
        //   // aduitItemcount:98765
        // }
      ],
      total: "",
      // listLoading: true,
      currentDate: [],
      externalBankList: [],
      listQuery: {
        page: 1,
        pagesize: 10,
        uid: "",
        stime: "",
        etime: ""
      },
      tableKey: ""
      // ctime:""
    };
  },
  created() {
    // this.getList();
    //如果记得时间戳是毫秒级的就需要*1000 不然就错了记得转换成整型
    //  this.ctime = new Date(1230999938);
    // alert(formatDate(d));
    if (window.localStorage.getItem("token")) {
      this.userInfoFun(window.localStorage.getItem("token"));
      console.log(this.listQuery.uid);
    }
  },
  mounted() {},
  methods: {
    handleFilter() {
      // this.listQuery.page = 1;
      this.getList();
    },
    getList() {
      createList(this.listQuery).then(res => {
        if (res.code == "200") {
          this.list = res.result.rows;
          console.log("this.list ", this.list);
          this.total = res.result.total;
        }
      });
      // console.log("res",res)
    },
    // 获取uid
    userInfoFun(token) {
      getuserInfo(token).then(res => {
        console.log("response", res);
        this.listQuery.uid = res.object.uid;
        this.getList();
        console.log(this.listQuery.uid);
      });
    },
    handleCreate() {
      // this.listQuery.uid = "";
      this.listQuery.stime = "";
      this.listQuery.etime = "";
      this.list = "";
    },
    formatDate(now) {
      var year = now.getFullYear();
      var month = now.getMonth() + 1;
      var date = now.getDate();
      var hour = now.getHours();
      var minute = now.getMinutes();
      var second = now.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  // background-color: #fff;
  padding-top: 10px;
}

.filter-container {
  margin: 5px 0 20px 0;
  height: 150px;
  border-width: 0px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(233, 233, 233, 1);
  border-radius: 10px;
  // box-shadow: 0px 0px 5px rgb(0 0 0 / 5%);
  font-family: "微软雅黑", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  line-height: 20px;
}
.filter-span {
  width: 30px;
}
.filter-tabel {
  background-color: #fff;
  border-radius: 10px;
  font-size: 16px;
}
.filter-item {
  margin-right: 10px;
}
</style>

